<template>
  <div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="50%">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
        <el-form-item label="资产组名称" prop="groupName">
          <el-input v-model="form.groupName"></el-input>
        </el-form-item>
        <el-form-item label="资产组价值" prop="worth">
          <el-select v-model="form.worth" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="等保级别" prop="grade">
          <el-select v-model="form.grade" placeholder="请选择">
            <el-option
              v-for="item in option1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input type="textarea" v-model="form.description"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  submitGroup,
  putGroup
} from '@/api/assets/group.js'
export default {
  data() {
    return {
      dialogTitle: '新增',
      form: {
        id: '',
        pid: '',
        groupName: '',
        worth: '',
        grade: '',
        description: '',
        levelcode: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入资产组名称', trigger: 'blur' }
        ],
        worth: [
          { required: true, message: '请选择资产组价值', trigger: 'blur' }
        ],
        grade: [
          { required: true, message: '请选择资产组等级', trigger: 'blur' }
        ]
      },
      dialogVisible: false,
      value: '',
      options: [
        { value: 0, label: '低' },
        { value: 1, label: '中' },
        { value: 2, label: '高' }
      ],
      option1: [
        { value: 0, label: '不评级' },
        { value: 1, label: 'S1A1G1' },
        { value: 2, label: 'S2A2G2' },
        { value: 3, label: 'S3A3G3' }
      ],
      type: ''
    }
  },
  methods: {
    init(data, flag) {
      this.clearForm()
      if (data.type === 'add') { // 新增子集
        this.type = data.type
        this.form.pid = data.id
        this.form.levelcode = data.levelcode
        this.dialogTitle = '添加资产组'
      } else if (data.type === 'update') { // 修改
        this.type = data.type
        this.form.id = data.id
        this.form.pid = data.pid
        this.form.groupName = data.groupName
        this.form.worth = data.worth
        this.form.grade = data.grade
        this.form.description = data.description
        this.form.levelcode = data.levelcode
        // this.form = { ...data }
        this.dialogTitle = '修改资产组'
      }
      this.dialogVisible = flag
    },
    clearForm() {
      this.form.pid = ''
      this.form.groupName = ''
      this.form.worth = ''
      this.form.grade = ''
      this.form.description = ''
      this.form.levelcode = ''
    },
    addDate() {
      this.$refs.formRef.validate(valid => {
        if (!valid) return
        if (this.type !== 'update') {
          const data = {
            pid: this.form.pid,
            groupName: this.form.groupName,
            worth: this.form.worth,
            grade: this.form.grade,
            description: this.form.description,
            levelcode: this.form.levelcode
          }
          submitGroup(data).then((res) => { // 新增
            this.dialogVisible = false
            this.$emit('handleGroup')
          })
        } else {
          putGroup(this.form).then((res) => { // 修改
            this.dialogVisible = false
            this.$emit('handleGroup')
          })
        }
      })
    }
  }
}
</script>

<style scoped>
  .el-select{
    width: 100%;
  }
</style>
